<template>
  <el-container class="layout-ltb">
    <el-container>
      <el-header height="114">
        <el-form
          ref="queryFormRef"
          :model="queryParams"
          size="small"
          label-position="right"
          class="search-form mt-[20px]"
        >
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="类型" prop="PlanSetType">
                <el-select
                  placeholder="请选择"
                  v-model="queryParams.PlanSetType"
                >
                  <el-option label="日计划" value="1" />
                  <el-option label="周计划" value="2" />
                  <el-option label="月计划" value="3" />
                  <el-option label="季计划" value="4" />
                  <el-option label="年计划" value="5" />
                  <el-option label="自定义" value="0" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="方向" prop="TaskSetType">
                <el-select
                  @change="f_ChangeTaskSetType"
                  placeholder="请选择"
                  v-model="queryParams.TaskSetType"
                >
                  <el-option label="按路线巡检" :value="1 * 1" />
                  <el-option label="按区域巡检" :value="2 * 1" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="路线" prop="InspDestId">
                <el-select
                  placeholder="请选择"
                  v-model="queryParams.InspDestId"
                >
                  <template v-for="item in lineData">
                    <el-option
                      :label="item.inspLineName"
                      :value="item.inspLineId"
                      :key="item.inspLineId"
                      v-if="queryParams.TaskSetType == item.inspLineType"
                    />
                  </template>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="部门" prop="InspDepartmentId">
                <el-select
                  placeholder="请选择"
                  v-model="queryParams.InspDepartmentId"
                  @change="f_ChangeDep"
                >
                  <el-option
                    :label="item.name"
                    :value="item.id"
                    :key="item.id"
                    v-for="item in depData"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="人员" prop="InspUserId">
                <el-select
                  placeholder="请选择"
                  v-model="queryParams.InspUserId"
                >
                  <el-option
                    :label="item.name"
                    :value="item.id"
                    :key="item.id"
                    v-for="item in operatorData"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="搜索" prop="KeyWords">
                <el-input
                  v-model="queryParams.KeyWords"
                  placeholder="请输入巡检名称/路线名称/姓名搜索"
                  maxlength="50"
                  show-word-limit
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-button
                @click="f_HandleSearch"
                type="primary"
                class="btn-search"
                size="small"
              >
                <i-ep-search class="mr-[2px] text-size-[11px] v-bottom" />搜索
              </el-button>
              <el-button
                @click="f_HandleReset"
                type="warning"
                class="btn-reset"
              >
                <i-ep-refresh class="mr-[2px] text-size-[11px] v-bottom" />重置
              </el-button>
            </el-col>
          </el-row>
        </el-form>

        <el-row :gutter="20">
          <el-col :span="6" />
        </el-row>
      </el-header>
      <el-main>
        <div>
          <div class="toolbar">
            <el-button type="primary" class="btn-add" @click="f_OpenDialog"
              ><i-ep-plus class="mr-[4px] text-size-[11px]" /> 新增</el-button
            >
          </div>
          <el-table
            v-if="tableData.length"
            :data="tableData"
            border
            :height="tableHeight"
            header-row-class-name="table-header"
            size="small"
          >
            <el-table-column
              type="index"
              width="60"
              label="序号"
              align="center"
            />
            <el-table-column
              prop="planSetName"
              label="巡检名称"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column prop="planSetType" label="计划类型" align="center">
              <template #default="scope">
                <el-tag v-if="scope.row.planSetType == 1" type="primary"
                  >日计划</el-tag
                >
                <el-tag v-if="scope.row.planSetType == 2" type="success"
                  >周计划</el-tag
                >
                <el-tag v-if="scope.row.planSetType == 3" type="info"
                  >月计划</el-tag
                >
                <el-tag v-if="scope.row.planSetType == 4" type="warning"
                  >季计划</el-tag
                >
                <el-tag v-if="scope.row.planSetType == 5" type="danger"
                  >年计划</el-tag
                >
                <el-tag v-if="scope.row.planSetType == 0" type="warning"
                  >自定义</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column
              prop="planSetType"
              label="巡检方向"
              align="center"
              show-overflow-tooltip
            >
              <template #default="scope">
                <el-tag v-if="scope.row.taskSetType == 1" type="danger"
                  >按线路巡检</el-tag
                >
                <el-tag v-if="scope.row.taskSetType == 2" type="success"
                  >按区域巡检</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column
              prop="inspDestName"
              label="线路/区域"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column
              prop="enableTime"
              label="巡检启用时间"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column
              prop="stopTime"
              label="巡检暂停时间"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column
              prop="taskSetName"
              label="巡检项名称"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column
              prop="isAvoidHoliday"
              label="避开节假日"
              align="center"
            >
              <template #default="scope">
                <el-tag v-if="scope.row.isAvoidHoliday" type="success"
                  >是</el-tag
                >

                <el-tag v-else type="warning">否</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              prop="inspDeppartmentName"
              label="巡检部门"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column
              prop="inspUserName"
              label="巡检员"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column
              prop="remark"
              label="备注"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column
              label="操作"
              align="center"
              width="200"
              fixed="right"
            >
              <template #default="scope">
                <el-button
                  @click="f_HandleStop(scope.row)"
                  :type="scope.row.status != 1 ? 'primary' : 'warning'"
                  size="small"
                  link
                  ><i-ep-edit class="mr-[2px] text-size-[11px] v-bottom" />{{
                    scope.row.status != 1 ? "启用" : "暂停"
                  }}</el-button
                >

                <el-button
                  @click="f_OpenDialog(scope.row)"
                  type="primary"
                  size="small"
                  link
                  ><i-ep-edit
                    class="mr-[2px] text-size-[11px] v-bottom"
                  />编辑</el-button
                >

                <el-button
                  @click="f_HandleDel(scope.row)"
                  type="danger"
                  size="small"
                  link
                  ><i-ep-delete
                    class="mr-[2px] text-size-[11px] v-bottom"
                  />删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <noneData :noneShow="!tableData.length" :height="tableHeight" />
          <pagination
            size="small"
            v-if="total > 0"
            v-model:total="total"
            v-model:page="queryParams.pageIndex"
            v-model:limit="queryParams.pageSize"
            @pagination="f_HandelQuery"
          />
        </div>
      </el-main>
    </el-container>

    <!-- 弹窗 -->
    <el-drawer
      v-model="dialog.visible"
      title="巡检计划"
      size="1400"
      append-to-body
      @close="f_CloseDialog"
      class="bg-[#f5f5f5!important]"
      destroy-on-close
    >
      <edit_drawer :form="form" :task-data="taskData" @close="f_CloseDialog" />
    </el-drawer>
  </el-container>
</template>

<script setup lang="ts">
defineOptions({
  name: "Inspection",
  inheritAttrs: false,
});
import LineAPI from "@/api/LineAPI";
import GisPolygonInfoAPI from "@/api/GisPolygonInfoAPI";
import TaskSetAPI from "@/api/TaskSetAPI";
import PlanAPI from "@/api/PlanAPI";
import edit_drawer from "./edit.vue";
let tableHeight = ref(0);
// 弹窗对象
const dialog = reactive({
  visible: false,
  title: "",
});
const queryFormRef = ref(ElForm);
const depData = ref([]);
const operatorData = ref([]);
const loading = ref(false);
const total = ref(0);
const tableData = ref([]);
const taskData = ref([]);
const polygonDataOld = ref([]);
const polygonData = ref([]);
const form = ref({
  planSetId: 0,
  planSetName: "",
  taskSetId: undefined,
  planSetType: 0,
  planStartTime: new Date(),
  planEndTime: new Date(),
  isAvoidHoliday: true,
  remark: "",
  planDate: "",
  taskSetCycle: "",
});

const lineData = ref([]);

const queryParams = reactive({
  pageIndex: 1,
  pageSize: 10,
  PlanSetType: undefined,
  TaskSetType: undefined,
  InspDestId: undefined,
  InspDepartmentId: undefined,
  InspUserId: undefined,
  KeyWords: undefined,
});

// 方向 线路联动
function f_ChangeTaskSetType() {
  // polygonData.value = [];
  // polygonDataOld.value.forEach((item) => {
  //   if (item.polygonType == queryParams.TaskSetType) {
  //     polygonData.value.push(item);
  //   }
  // });

  queryParams.InspDestId = undefined;
}

// 重置
function f_HandleReset() {
  queryFormRef.value.resetFields();
  operatorData.value = [];
  // f_HandleSearch();
}

// 复制
function f_HandleStop(data: any) {
  ElMessageBox.confirm("确认暂停或启用?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    loading.value = true;
    if (data.status != 1) {
      PlanAPI.api_enable(data.planSetId).then(({ data, succeeded }) => {
        if (succeeded) {
          ElMessage.success("操作成功！");
          f_HandelQuery();
        }
      });
    } else {
      PlanAPI.api_stop(data.planSetId).then(({ data, succeeded }) => {
        if (succeeded) {
          ElMessage.success("操作成功！");
          f_HandelQuery();
        }
      });
    }
  });
}

// 删除
function f_HandleDel(data: any) {
  ElMessageBox.confirm("确认删除数据?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      loading.value = true;
      PlanAPI.api_del(data.planSetId).then(({ data, errors, succeeded }) => {
        if (succeeded) {
          ElMessage.success("删除成功！");
          f_HandelQuery();
        }
        loading.value = false;
      });
    })
    .catch(() => ElMessage.info("已取消删除!"));
}

// 打开弹窗
function f_OpenDialog(data: any) {
  if (data.planSetId) {
    form.value.planSetId = data.planSetId;
    form.value.planSetName = data.planSetName;
    form.value.taskSetId = data.taskSetId;
    form.value.planSetType = data.planSetType;
    form.value.planStartTime = data.planStartTime;
    form.value.planEndTime = data.planEndTime;
    form.value.isAvoidHoliday = data.isAvoidHoliday;
    form.value.remark = data.remark;
    form.value.planDate = "";
    form.value.taskSetCycle = data.taskSetCycle;
  } else {
    form.value.planSetId = 0;
    form.value.planSetName = "";
    form.value.taskSetId = undefined;
    form.value.planSetType = 1;
    form.value.planStartTime = new Date();
    form.value.planEndTime = new Date();
    form.value.isAvoidHoliday = true;
    form.value.remark = "";
    form.value.planDate = "";
    form.value.taskSetCycle = "";
  }
  dialog.visible = true;
}

// 搜索
function f_HandleSearch() {
  queryParams.pageIndex = 1;
  f_HandelQuery();
}

// 查询
function f_HandelQuery() {
  loading.value = true;
  PlanAPI.api_query(queryParams).then(({ data, succeeded }) => {
    if (succeeded) {
      tableData.value = data.items;
      total.value = data.totalCount;
    }
  });
}

// 查询 任务
function f_HandelQueryTask() {
  let params = {
    pageIndex: 1,
    pageSize: 100,
  };
  TaskSetAPI.api_query(params).then(({ data, succeeded }) => {
    if (succeeded) {
      taskData.value = data.items;
    }
  });
}

// 查询 区域
function f_HandelQueryPolygon() {
  let params = {
    pageSize: 100,
    pageIndex: 1,
  };
  GisPolygonInfoAPI.api_query_geo(params).then(({ data, succeeded }) => {
    if (succeeded) {
      // polygonData.value = data.items;
      polygonDataOld.value = data.items;
    }
  });
}

// 查询 路线
function f_HandelQueryLine() {
  let params = {
    pageSize: 100,
    pageIndex: 1,
  };
  LineAPI.api_query(params).then(({ data, succeeded }) => {
    if (succeeded) {
      lineData.value = data.items;
    }
  });
}

// 查询 部门
function f_HandelQueryDep() {
  TaskSetAPI.api_query_dep().then(({ data, succeeded }) => {
    if (succeeded) {
      depData.value = data;
    }
  });
}

// 部门 change
function f_ChangeDep() {
  let params = {
    DepartmentId: queryParams.InspDepartmentId,
  };
  TaskSetAPI.api_query_operators(params).then(({ data, succeeded }) => {
    if (succeeded) {
      operatorData.value = data;
    }
  });
}

// 关闭弹框
function f_CloseDialog() {
  dialog.visible = false;
  queryParams.PageIndex = 1;
  f_HandelQuery();
}

window.onresize = () => {
  return (() => {
    tableHeight.value = window.innerHeight - 380;
  })();
};

onMounted(() => {
  f_HandelQuery();
  f_HandelQueryTask();
  f_HandelQueryDep();
  f_HandelQueryPolygon();
  f_HandelQueryLine();
  tableHeight.value = window.innerHeight - 380;
});
</script>
<style scoped lang="scss">
.mydrawer {
  background: red !important;
}
</style>
